<template>
  <div class="bg_white" style="height: calc(100vh - 198px);">
    <a-spin :spinning="spinning" tip="加载中">
    <a-row :gutter="24" style="text-align: center">
      <div v-for="item in list" :key="item">
        <a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="4">
        <a-statistic :title="item.comment" :value="item.countNumber"></a-statistic>
      </a-col>
      </div>
     
      <!-- <a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="4">
        <a-statistic title="年级数" :value="1128"></a-statistic>
      </a-col>
      <a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="4">
        <a-statistic
          title="教职工数"
          :value="93"
          class="demo-class"
        ></a-statistic>
      </a-col>
      <a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="4">
        <a-statistic
          title="班级数量"
          :value="93"
          class="demo-class"
        ></a-statistic>
      </a-col>
      <a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="4">
        <a-statistic title="学生数" :value="1128"></a-statistic>
      </a-col>
      <a-col :xs="8" :sm="8" :md="8" :lg="8" :xl="4">
        <a-statistic
          title="家长数"
          :value="93"
          class="demo-class"
        ></a-statistic>
      </a-col> -->
    </a-row>

    <a-row :gutter="24">
      <div style="margin: 0 10px">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <h3 :style="{ marginBottom: '16px' }">
            <!-- Default Size -->
          </h3>
          <a-list bordered :data-source="data" style="background: #fff">
            <a-list-item
              slot="renderItem"
              class="renderItem"
              slot-scope="item"
              @click="clickhref(item)"
              style="cursor: pointer; padding: 15px 20px"
            >
              {{ item.content
              }}<span style="right: 10px; position: absolute"
                ><a-icon type="right"
              /></span>
            </a-list-item>
            <div slot="header">近期更新</div>
          </a-list>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <h3 :style="{ marginBottom: '16px' }">
            <!-- Default Size -->
          </h3>
          <a-card title="快捷入口">
            <a-card-grid
              v-for="item in quickList"
              :key="item"
              @click="clickGird(item.id)"
            >
              <img :src="item.src" style="width: 50px" />
              <span style="padding-left: 10px">{{ item.title }}</span>
              <!-- <span style="padding-left: 10px;" v-if="item.title.length == 6">{{ item.title }}</span>
              <span style="padding-left: 20px;" v-if="item.title.length == 5">{{ item.title }}</span>
              <span style="padding-left: 28px;" v-if="item.title.length == 4">{{ item.title }}</span> -->
            </a-card-grid>
          </a-card>
        </a-col>
      </div>
    </a-row>
  </a-spin>
  </div>
</template>

<script>
import HttpHome from "../../api/home";
const data = [
  {
    id: 1,
    content: "支持使用班级填表收集学生信息并统计",
    url: "https://alidocs.dingtalk.com/i/p/Y7kmbokZp3pgGLq2/docs/KOEmgBoGwD78vPBnGg1QVndLerP9b30a",
  },
  {
    id: 2,
    content: "校园收款支持Excel导入收款单",
    url: "https://alidocs.dingtalk.com/i/p/Y7kmbokZp3pgGLq2/docs/3mzaPNMZ6jkJqd4Zodr3VYLDwXq4Ky1r",
  },
  {
    id: 3,
    content: "新增学校数字大脑，进一步提升数字化水平",
    url: "https://alidocs.dingtalk.com/i/p/Y7kmbokZp3pgGLq2/docs/jQPRqwxd3NLWjpzq1jldJYK6lrGM4795",
  },
  {
    id: 4,
    content: "教学首页新增各种全新资料，新增云豆商城",
    url: "https://alidocs.dingtalk.com/i/p/Y7kmbokZp3pgGLq2/docs/Xzr6RBgD3LYJndnyYe1AWZPnyElvd7e9",
  },
];
export default {
  data() {
    return {
      list: [],
      data,
      visible: false,
      spinning:true,
      quickList: [
        {
          id: 1,
          title: "批量导入学生",
          src: "../img/assets/img/img1.svg",
        },
        {
          id: 2,
          title: "快速设置教职工",
          src: "../img/assets/img/img2.svg",
        },
        {
          id: 3,
          title: "学生账号管理",
          src: "../img/assets/img/img3.png",
        },
        {
          id: 4,
          title: "管理员手册",
          src: "../img/assets/img/img4.svg",
        },
        {
          id: 5,
          title: "各班二维码",
          src: "../img/assets/img/img5.svg",
        },
        {
          id: 6,
          title: "常见问题",
          src: "../img/assets/img/img6.svg",
        },
      ],
    };
  },
  mounted() {
    this.getNumAll();
  },
  methods: {
    async getNumAll() {
      let res = await HttpHome.getNumconut();
      
      if (res.data.errcode == 0) {
        this.list = res.data.rows;
        this.spinning = false;
        
      }
    },
    clickGird(val) {
      switch (val) {
        case 1:
          this.$router.push({ path: "ImportStudents" });
          break;
        case 2:
          this.$router.push({ path: "SetupTeacher" });
          break;
        case 3:
          // this.$router.push({ path: "stuManage" });
          window.open(
            "https://login.dingtalk.com/oauth2/challenge.htm?redirect_uri=https://euser.edu-aliyun.com/ding/oaAuth&response_type=code&org_type=management&client_id=suitevycxk1ii8wgpccr4%20&scope=openid%20corpid&prompt=consent&corpId=ding3eec1e42cee2c7734ac5d6980864d335"
          );
          break;
        case 4:
          this.$router.push({ path: "adminGuide" });
          break;
        case 5:
          this.$router.push({ path: "codeEachClass" });
          break;
        case 6:
          break;
      }
    },
    clickhref(val) {
      window.open(val.url);
    },
    bindEnter() {},
  },
};
</script>

<style scoped>
.ant-layout-header {
  background: #03212100 !important;
}

.renderItem:hover {
  background: rgba(0, 0, 0, 0.25);
}
.a-card-grid{
  text-align: center;
  margin: 12px;
  cursor: pointer; 
}
</style>
